<template>
  <div class="student">
    <h2>姓名：{{name}}</h2>
    <h2>性别：{{sex}}</h2>
    <button @click="sendStudentName">把学生名给App</button>
    <button @click="unbind">解绑自定义事件atguigu</button>
    <button @click="death">点我销毁组件实例</button>
  </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            name: 'zs',
            sex: '男', 
        }
    },
    methods: {
      sendStudentName() {
        //触发atguigu事件（调用vc.$emit函数）
        //第一个参数事件名，之后参数为数据
        this.$emit('atguigu', this.name, 6, 66)

        //触发demo事件
        this.$emit('demo')
      },
      unbind() {
        //解绑单个自定义事件
        this.$off('atguigu') 

        //解绑多个自定义事件
        // this.$off(['atguigu', 'demo'])

        //解绑所有自定义事件
        // this.$off()
      },
      death() {
        //销毁组件实例后，该组件上绑定的所有自定义事件都会自动解绑
        this.$destroy()
        //如果销毁vm，所有子组件的自定义事件都会解绑
      }
    }
}
</script>

<style scoped>
  .student{
      background-color: orange;
      padding: 5px;
      margin-top: 20px;
  }
</style>